<template>
  <div
    v-draggable="true"
    class="x-drag h-full w-full"
    data-shape="drag"
    :class="{ active: dragActive === id }"
    @click="dragActive = id"
  >
    <DragHeader class="px-4" v-bind="$attrs" :title="title"></DragHeader>
    <div class="drag-content">
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import { nanoid } from "nanoid";

import { dragActive } from ".";
import DragHeader from "./header.vue";

const id = ref(nanoid());
defineProps({
  title: String
});
</script>

<style lang="scss" scoped>
.x-drag {
  position: absolute;
  box-shadow: 0 0 25px #80808065;
  border-radius: 6px;
  background-color: white;
  border: 1px solid transparent;
  .drag-content {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    height: calc(100% - 64px);
  }
}
.active {
  z-index: 100;
}
</style>
